@import "normalize";
@import "base";
@import "variable";

.sn_container{
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color:pink ;
  padding-top: 90rem / @base;
}
.sn_header{
  height: 90rem / @base ;
  width: 100%;
  background-color: @maincolor;
  padding: 0 90rem /@base;
  position: relative;
  padding-left: 90rem/@base;
  padding-right: 90rem/@base;
  padding-top: 15rem/@base;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .header_category,
  .header_cart{
    width: 90rem / @base;
    height: 90rem  / @base;
    position: absolute;
    top: 0;

  }
  .header_category{
    left: 0;
    background: url("../images/icon_category.png") no-repeat center;
    background-size: 44rem / @base , 70rem / @base;
  }
  .header_cart{
    right: 0;
    background: url("../images/icon_cart.png") no-repeat center;
    background-size: 63rem / @base , 68rem / @base;
  }
  .info{
    width: 100%;
    height: 80rem / @base;
    position: relative;
    .search{
      width: 60rem / @base;
      height: 60rem / @base;
      position: absolute;
      top: 0;
      left: 0;
      background: url("../images/icon_search.png") no-repeat center;
      background-size: 27rem / @base , 28rem / @base;
    }
    input{
      width: 100%;
      height: 60rem / @base;
      padding-left: 60rem / @base;
      border-radius: 10rem / @base;
      font-size: 24rem / @base;
    }
  }
}

.sn_nav{
  background-color: #fff;
  li{
    float: left;
    width: 20%;
    a{
      display: block;
      padding: 10rem / @base 0;

      img{
        width: 60rem / @base;
        height: 60rem / @base;
        margin: 0 auto;
      }
      p{
        text-align: center;
        line-height: 50rem /@base;
        font-size: 20rem / @base;
      }
    }
  }
}
.sn_footer{
  height: 80rem / @base;
  width: 100%;
  position: fixed;
  background-color: #fff;
  left: 0;
  bottom: 0;
  padding: 10rem / @base  0;
  z-index: 999;
  
  li{
    float: left;
    width: 20%;
  }
  a{
    display: block;
    width: 100%;
    height: 100%;
    img{
      width: 40rem /@base;
      height: 40rem / @base;
      margin: 0 auto;
    }
    p{
      text-align: center;
      font-size: 20rem / @base;
    }
  }
}